<template>
  <div class="content">
    <div class="amap-wrapper" :style="{height:height,width:width}">
      <el-amap-search-box
        class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
      ></el-amap-search-box>

      <el-amap class="amap-box" :zoom="zoom" :center="center" :events="events">
        <el-amap-marker v-for="(marker, i) in markers" :key="i" :position="marker"></el-amap-marker>
      </el-amap>
    </div>
    <div class="Y-font-size-20 Y-margin-vertical-top-8">地址：{{address}}, 经纬度：{{lng}} , {{lat}}</div>
    <div class="Y-text-align-right Y-avg-1">
      <el-button type="primary" @click="getLnglat" size="small">设置地址</el-button>
    </div>
  </div>

</template>

<script>
export default {
  name: 'el-map',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    inputPosition: {
      type: Object,
      default: () => ({lng: 113.321206, lat: 23.119293, address: '广州市珠江新城'})
    }
  },
  data () {
    let _this = this
    return {
      center: [117.120098, 36.6512], // 地图中心点坐标
      zoom: 12, // 初始化地图显示层级
      // mapStyle: 'amap://styles/8b6be8ec497009e17a708205348b899a', // 设置地图样式
      markers: [],
      searchOption: {
        city: '广州',
        citylimit: false
      },
      address: '广州市',
      lng: 113.321206,
      lat: 23.119293,
      events: {
        init: (o) => {
          // 这里通过高德 SDK 完成。
          /* let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all',
            city: '全国'
          }) */

          // 回显定位
          // let isSuccess = false
          // console.log(_this.inputPosition.lng)
          // console.log(_this.inputPosition.lat)
          /* if (_this.inputPosition.lng && _this.inputPosition.lat){
            geocoder.getAddress([_this.inputPosition.lng, _this.inputPosition.lat], function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                if (result && result.regeocode) {
                  _this.address = result.regeocode.formattedAddress
                  _this.markers = [_this.lng, _this.lat]
                  isSuccess = true
                }
              }
            })
          }

          if (!isSuccess) {
            geocoder.getLocation(_this.inputPosition.address, (status, result) => {
              if (status === 'complete' && result.geocodes.length) {
                let lnglat = result.geocodes[0].location
                _this.lng = lnglat.lng
                _this.lat = lnglat.lat
                _this.center = [_this.lng, _this.lat]
                _this.markers = [_this.center]
                isSuccess = true
              }
            })
          } */
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          let { lng, lat } = e.lnglat
          this.center = [lng, lat]
          this.markers = [[lng, lat]]
          this.lng = lng
          this.lat = lat
          // 这里通过高德 SDK 完成。
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                _this.address = result.regeocode.formattedAddress
              }
            }
          })
        }
      }
    }
  },
  computed: {
  },
  created () {
  },
  activated () {

  },
  watch: {
    inputPosition: {
      handler (newVal, oldVal) {
        this.address = this.inputPosition.address || this.address
        this.lng = this.inputPosition.lng || this.lng
        this.lat = this.inputPosition.lat || this.lat
        this.center = [this.lng, this.lat]
        this.markers = [this.center]
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    addMarker () {
      this.markers = []
      let lng = 121.5 + Math.round(Math.random() * 1000) / 10000
      let lat = 31.197646 + Math.round(Math.random() * 500) / 10000
      this.markers = [[lng, lat]]
    },
    onSearchResult (pois) {
      if (pois.length > 0) {
        let center = pois[0]
        this.lng = center.lng
        this.lat = center.lat
        this.address = center.name
        this.center = [center.lng, center.lat]
        this.markers = [[center.lng, center.lat]]
      }
    },
    getLnglat () {
      this.$emit('getPosition', this.lng, this.lat, this.address)
    }
  }
}
</script>

<style scoped>
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}
.amap-wrapper {
  position: relative;
}
</style>
